<template>
  <li
    class="songlist"
    :class="{
      active: currentSong && currentSong.id === item.id,
      playing: currentSong && currentSong.id === item.id && playing,
    }"
  >
    <span class="index" v-if="index">{{ index>9?index:"0"+index }}</span>
    <div class="song">
      <h2>{{ item.name}}
        <span
          class="alias"
          v-for="(i, index) in item.song ? item.song.alias : item.alia"
          :key="index"
          >({{ i }})</span>
      </h2>
      <!-- <i class="sq"></i> -->
      <span class="songname"
        >{{ songname }} -
        {{ item.song ? item.song.album.name : item.al.name }}</span
      >
    </div>
    <div class="icon">
      <span class="play"></span>
      <div class="playicon">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </li>
</template>

<script>
export default {
  props: {
    item: Object,
    index: Number,
    currentSong: Object,
    playing:Boolean,
    playlist:Object,
  },
  computed: {
    songname: function () {
      let songlen = this.item.song
        ? this.item.song.artists.length
        : this.item.ar.length;
      // let songlen = ;
      let song = this.item.song ? this.item.song.artists : this.item.ar;
      if (songlen > 1) {
        let name = "";
        song.forEach(function (i) {
          name += i.name + "/";
        });
        // 去掉最后一个斜线
        name = name.substr(0, name.length - 1);
        return name;
      } else {
        return this.item.song
          ? this.item.song.artists[0].name
          : this.item.ar[0].name;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.songlist {
  width: 96%;
  border-bottom: 1px solid #cac8c8;
  display: flex;
  align-items: center;
  padding: 4px 0;
  position: relative;
  height: 55px;
  .song {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    h2 {
      font-size: 17px;
      color: rgb(51, 51, 51);
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 4px;
      .alias {
        color: #ccc;
      }
    }
    .songname {
      font-size: 12px;
      color: rgb(136, 136, 136);
      display: flex;
      align-items: center;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      &::before {
        content: "";
        width: 12px;
        height: 8px;
        background: url("../assets/xuebi.png") no-repeat 0 0;
        background-size: 166px 97px;
        margin-right: 5px;
      }
    }
  }
  &.active {
    .icon {
      span {
        display: none;
      }
      .playicon {
        display: flex;
        justify-content: space-between;
        width: 20px;
        height: 20px;
        margin: 0 10px;
        span {
          width: 12%;
          height: 100%;
          background-color: #d43c33;
          display: inline-block;
          animation: loading 0.6s linear infinite alternate;
          transform-origin: bottom;

          animation-play-state: paused;
          &:nth-child(1) {
            animation-delay: -0.4s;
          }
          &:nth-child(2) {
            animation-delay: -0.6s;
          }
          &:nth-child(3) {
            animation-delay: -0.2s;
          }
          &:nth-child(4) {
            animation-delay: 0s;
          }
        }
      }
    }
    &.playing {
      .icon {
        .playicon {
          span {
            animation-play-state: running;
          }
        }
      }
    }
  }
  .play {
    width: 22px;
    height: 22px;
    display: inline-block;
    margin: 0 10px;
    background: url("../assets/xuebi.png") no-repeat -24px 0;
    background-size: 166px 97px;
  }
  .index {
    font-size: 18px;
    position: absolute;
    left: -30px;
  }

}
@keyframes loading {
  from {
    transform: rotateX(90deg);
  }
  to {
    transform: rotateX(0);
  }
}
</style>